<template>
    <div>
        <el-collapse model-value="1" class="collapase-main">
            <el-collapse-item :title="title" name="1" class="collapsebg">
                <ul v-if="dataList.length > 0">
                    <li v-for="item in dataList" :key="item['id']">
                        <el-checkbox v-model="item['checked']" :label="item['name'] +'('+ item['number'] + ')'" style="width: 100%;" @change="handleChangeFirst(item)"/>
                    </li>
                </ul>
                <div v-else class="nodata">
                    暂无数据
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script setup lang="ts">
import { ref, PropType } from 'vue'
const props = defineProps({
    title: {
        type: String,
		default: ''
    },
    dataList: {
        type: Array as PropType<any[]>,
		default: () => []
    }
})

const emit = defineEmits(['checked'])

interface obj {
    name: String,
    id: Number | string,
    number: Number,
    checked: Boolean
}
const checkedList = ref([])

const handleChangeFirst = (val: obj) => {
    if (!Array.isArray(checkedList.value)) return;
    if(!val.checked) {
        let index = checkedList.value.findIndex((item) => item["id"] === val.id);
        if (index !== -1) {
            checkedList.value.splice(index, 1);
        }
    } else {
        checkedList.value.push(val);
    }
    emit('checked', checkedList.value)
}
</script>
<style lang="scss" scoped>
.nodata {
    text-align: center;
    padding-top: 1.3rem;
    cursor: pointer;
    color: #a8abb2;
}
.collapase-main {
    margin-bottom: 5px;
}
.collapsebg ul {
    box-shadow: 0 2px 3px #d2d2d2bf;
    border: 1px solid #ebebeb;
}
.collapsebg ul li {
    padding-left: 1.7rem !important;
}
.collapsebg ul li:hover {
  background-color: #f6f6f6;
}

</style>
<style lang="scss">
// 两个组件共有的css
.collapsebg .el-collapse-item__wrap {
    border-bottom: none;
}
.collapsebg .el-collapse-item__header{
    background: #e3ecfd !important;
    color: #333 !important;
    padding-left: 1.7rem !important;
    font-weight: 500 !important;
    padding-bottom: 0px;
}
</style>